<template>
	<view class="main">
		<view class="avatar item">
			<view class="left">
				{{$t('mine.avatar')}}
			</view>
			<view class="right" @tap="changeAvatar">
				<image class="avatar" :src="userData.headpic" mode=""></image>
				<uni-icons type="right" size="16" class="icons" color="#DBDBDB"></uni-icons>
			</view>
		</view>
		<view class="avatar item">
			<view class="left">
				{{$t("mine.nikeName")}}
			</view>
			<view class="right" @click="toDuction('nikename',userData.firstname)">
				<view class="text">
					{{userData.firstname}}
				</view>
				<uni-icons type="right" size="16" class="icons" color="#DBDBDB"></uni-icons>
			</view>
		</view>
		<view class="avatar item" @click="changeSex">
			<view class="left">
				{{$t('mine.sex')}}
			</view>
			<view class="right">
				<view class="text">
					{{userData.sex}}
				</view>
				<uni-icons type="right" size="22" class="icons" color="#DBDBDB"></uni-icons>
			</view>
		</view>
		<view class="avatar item">
			<view class="left">
				{{$t('mine.email')}}
			</view>
			<view class="right">
				<view class="text">
					{{userData.email}}
				</view>
				<uni-icons type="right" size="22" class="icons" color="#DBDBDB"></uni-icons>
			</view>
		</view>
		<view class="avatar item">
			<view class="left">
				{{$t('mine.birthDate')}}
			</view>
			<view class="right" @click="show=true">
				<view class="text">
					<gpp-date-picker @onConfirm="onConfirm" :startDate="startDate" :endDate="endDate"
						:defaultValue="pickerDate">
						{{userData.birthday?userData.birthday:"点击设置"}}
					</gpp-date-picker>

				</view>
				<uni-icons type="right" size="16" class="icons" color="#DBDBDB"></uni-icons>
			</view>
		</view>
		<view class="avatar item">
			<view class="left">
				{{$t('mine.duction')}}
			</view>
			<view class="right" @click="toDuction('duction',userData.description)">
				<view class="text">
					{{userData.description?userData.description:"暂无简介"}}
				</view>
				<uni-icons type="right" size="16" class="icons" color="#DBDBDB"></uni-icons>
			</view>
		</view>
		<uni-popup ref="sexPopup" type="bottom">
			<view class="contents">
				<view class="top">
					<view class="title">
						{{$t('mine.sexTitle')}}
					</view>
					<view class="close" @click="closeSex">
						<uni-icons type="closeempty" size="16" class="icons" color="#000000"></uni-icons>
					</view>
				</view>
				<view class="content">
					<view class="man" :class="{'active':sex=='男'}" @click="sex='男'">
						{{$t('mine.male')}}
					</view>
					<view class="women" :class="{'active':sex=='女'}" @click="sex='女'">
						{{$t('mine.female')}}
					</view>
				</view>
				<view class="btn" @click="submitSex">
					{{$t('login.confirm')}}
				</view>
			</view>
		</uni-popup>
		<!-- <u-calendar active-bg-color="#4DBEC1" :safe-area-inset-bottom="true" @change="changeDate" v-model="show"
			:mode="mode"></u-calendar> -->

		<uni-popup ref="popup" type="bottom">
			<view class="chang-avatar">
				<view class="content">
					<view>
						{{$t('mine.pictures')}}
					</view>
					<view>
						{{$t('mine.Photo')}}
					</view>
				</view>
				<view class="cencal" @click="close">
					{{$t('search.cancel')}}
				</view>
			</view>
		</uni-popup>

		<canver-cut ref="gmyImgCropper" :quality="1" cropperType="fixed" :imgSrc="imgSrc" @getImg="getImg"></canver-cut>

	</view>
</template>

<script>
	import canverCut from "../../components/canvas-cut/canvas-cut.vue"
	import {
		getDate
	} from "../../utils/utils.js"
	import gppDatePicker from "../../components/gpp-datePicker/gpp-datePicker.vue"
	import {
		pathToBase64
	} from "../../js_sdk/mmmm-image-tools/index.js"
	export default {
		components: {
			gppDatePicker,
			canverCut
		},
		data() {
			return {
				show: false,
				mode: "date",
				userData: {},
				startDate: "1900-01-01",
				endDate: getDate(new Date()),
				pickerDate: '2020-11-25',
				token: "",
				sex: "男",
				imgSrc: ""
			};
		},
		onShow() {
			this.getUser()
		},
		methods: {
			getImg(e) {
				let _this = this
				console.log(e)
				uni.getImageInfo({
					src: e,
					success: (path) => {
						pathToBase64(path.path).then(base64 => {
								console.log(base64); // 这就是转为base64格式的图片
								_this.updateAvatar(base64)
							})
							.catch(error => {
								console.error(error)
							})
					}
				})
			},
			//修改生日
			onConfirm(e) {
				console.log(e)
				this.$httpRequest({
					url: "app/api/updateselfInfo.php",
					method: "POST",
					data: {
						ustoken: this.token,
						birthday: e.dateValue
					}
				}).then(res => {
					console.log(res)
					if (res.errorcode == 200) {
						this.getUser()
						uni.showToast({
							title: "修改成功",
							icon: "success"
						})
					}
				})
			},
			//修改性别
			submitSex() {
				this.$httpRequest({
					url: "app/api/updateselfInfo.php",
					method: "POST",
					data: {
						ustoken: this.token,
						sex: this.sex
					}
				}).then(res => {
					if (res.errorcode == 200) {
						uni.showToast({
							title: "修改成功",
							icon: "success"
						})
						this.getUser()
						this.$refs.sexPopup.close()
					}
				})
			},
			getUser() {
				this.token = JSON.parse(uni.getStorageSync('token')).token
				this.$httpRequest({
					url: "app/api/selfInfo.php",
					method: "POST",
					data: {
						ustoken: this.token
					}
				}).then(res => {
					console.log(res)
					this.userData = res.data
				})
			},
			close() {
				this.$refs.popup.close()
			},
			//打开相册或摄像头
			changeAvatar() {
				this.$refs.gmyImgCropper.chooseImage()
			},
			//上传头像
			updateAvatar(imgbase) {
				this.$httpRequest({
					url: "app/api/uploadimg.php",
					method: "POST",
					data: {
						ustoken: this.token,
						imgbase
					}
				}).then(res => {
					console.log(res)
					if (res.errorcode == 200) {
						this.getUser()
					}
				})
			},
			changeSex() {
				this.sex = this.userData.sex
				this.$refs.sexPopup.open('bottom')
			},
			closeSex() {
				this.$refs.sexPopup.close()
			},
			changeDate(val) {
				console.log(val)
			},
			toDuction(val, data) {
				uni.navigateTo({
					url: "/pages/myIntroduction/myIntroduction?val=" + val + '&description=' + data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;

		.item {
			width: 90%;
			margin: 0 auto;

			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2rpx solid #EBEDF0;

			.left {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #232323;
				line-height: 96rpx;
			}

			.right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				width: 40%;

				.text {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #A9AFB8;
					line-height: 38rpx;
					margin: 20rpx 0;
				}

				.avatar {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin: 44rpx 10rpx
				}
			}
		}

		.contents {
			width: 100%;
			background-color: #FFFFFF;
			height: 556rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			overflow: hidden;

			.top {
				width: 90%;
				margin: 48rpx auto;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #0F1826;
				}
			}

			.content {
				width: 90%;
				margin: 0 auto;

				view {
					text-align: center;
					line-height: 92rpx;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #0F1826;

					&.active {
						background: #EBEDF0;
						border-radius: 56rpx;
					}
				}
			}

			.btn {
				width: 90%;
				margin: 48rpx auto 0;
				text-align: center;
				line-height: 94rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 144rpx;
				background: #4DBEC1;
			}
		}

		.chang-avatar {
			width: 100%;
			background-color: #FFFFFF;
			height: 374rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			overflow: hidden;

			.content {
				view {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					text-align: center;
					line-height: 116rpx;
					border-bottom: 2rpx solid #EBEDF0;
				}
			}

			.cencal {
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #6E7580;
				text-align: center;
				line-height: 140rpx;
			}
		}
	}
</style>
